<template>
  <div>
    <v-header></v-header>
    <el-form :model="forgetForm" class="forgetContainer" :rules="rules" ref="forgetForm" status-icon
             @keyup.enter.native="submitForm('forgetForm')">
      <el-form-item>
        <el-row>
          <el-col :span="12">
            <router-link to='forget' style="text-decoration: none;">
              <div class="grid-content bg-purple"
                   style="text-align: center;font-size: 20px;color: #409EFF;border-bottom: 2px solid #409EFF;">
                忘记密码
              </div>
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to='login' style="text-decoration: none;color: #000000">
              <div class="grid-content bg-purple-light" style="text-align: center;font-size: 20px;">
                返回登录
              </div>
            </router-link>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="forgetForm.email" auto-complete="false" type="text" prefix-icon="el-icon-message"
                  placeholder="请输入邮箱" class="inputContainer" ref="email"></el-input>
      </el-form-item>
      <el-form-item prop="emailCode" style="display: inline">
        <el-input v-model="forgetForm.emailCode" style="width: 150px" prefix-icon="el-icon-postcard"
                  placeholder="请输入验证码" class="inputContainer"></el-input>
        <el-button type="primary" size="medium" :disabled="disable" :class="{ codeGeting:isGeting }"
                   @click="getVerifyCode('forgetForm')" style="font-size: 14px;margin-left: 10px;">{{getCode}}
        </el-button>
        <span style="margin-left: 10px" v-html="icon"></span>
        <!--        <i class="el-icon-loading"></i>-->
      </el-form-item>
      <div style="margin-top: 10px;margin-bottom: 10px">
        <span style="font-size: 12px;color: #999999">注：验证邮箱可更改密码</span>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('forgetForm')" style="width: 100%" class="inputContainer">验证
        </el-button>
      </el-form-item>
    </el-form>

  </div>
</template>


<script>

  import header from '../layout/Header'
  import footer from '../layout/Footer'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer
    },
    name: 'Forget',
    data () {
      let checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }
      return {
        forgetForm: {
          email: '',
          emailCode: ''
        },
        isGeting: false,
        disable: false,
        getCode: '获取验证码',
        count: 60,
        icon: '',
        rules: {
          email: [
            {
              validator: checkEmail,
              trigger: 'blur'
            }
          ],
          emailCode: [
            {
              required: true,
              message: '验证码不能为空',
              trigger: 'blur'
            },
          ]
        },
        ip: '',

      }
    },
    created() {
      document.title = '忘记密码';
    },
    mounted () {
      this.getIP();
    },
    methods: {
      getIP(){
        this.ip=returnCitySN["cip"];
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          this.ip=returnCitySN["cip"];
          if (valid) {
            this.$axios({
              method: 'post',
              url: '/user/before/verifyChangePassword',
              dataType: 'json',
              data: {
                email: this.forgetForm.email,
                emailCode: this.forgetForm.emailCode,
                ip:this.ip,
              }
            }).then((res) => {
              if (res.data.msgCode === '200') {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
                this.$router.push({
                  path: '/updatePassword',
                  query: {
                    token:res.data.data.info,
                    email:this.forgetForm.email
                  }
                })
                // this.$router.push('/login')
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                })
              }
              console.log(res.data)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getVerifyCode (formName) {
        this.icon = '<i class="el-icon-loading"></i>'
        this.$refs[formName].validateField('email', valid => {
          if (!valid) {
            let countDown = setInterval(() => {
              if (this.count < 1) {
                this.isGeting = false
                this.disable = false
                this.getCode = '获取验证码'
                this.count = 60
                clearInterval(countDown)
              } else {
                this.isGeting = true
                this.disable = true
                this.getCode = this.count-- + 's后重发'
              }
            }, 1000)
            this.$axios({
              method: 'post',
              url: '/user/before/getEmailCodeForForgetPassword',
              dataType: 'json',
              contentType: 'application/json',
              data: {
                email: this.forgetForm.email
              }
            }).then((res) => {
              console.log(res.data)
              if (res.data.msgCode === '200') {
                this.icon = '<i class="el-icon-circle-check"></i>'
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    }
  }
</script>

<style scoped>
  .forgetContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 30px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 25px #cac6c6;
  }

  .inputContainer {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>
